<template>
    <div class="box">
        <div class="box1">
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
                class="demo-ruleForm">
                <h3 style="text-align: center; margin: 10px 0; font-size: 20px; font-weight: bold; color: #fff;">
                    叩丁狼商品管理系统</h3>
                <el-form-item prop="username" class="el-from-item">
                    <el-input class="el-input" v-model="ruleForm.username" placeholder="请输入账号" type="text"
                        autocomplete="off" :prefix-icon="UserFilled" />
                </el-form-item>
                <el-form-item prop="checkPass" class="el-from-item">
                    <el-input class="el-input" v-model="ruleForm.password" placeholder="请输入密码" type="password"
                        autocomplete="off" :prefix-icon="Lock" />
                </el-form-item>
                <el-form-item>
                    <el-button style="width: 400px;margin-left: -120px;" type="primary"
                        @click="submitForm(ruleFormRef)">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { FormInstance, ElMessage, ElButton, ElForm, ElFormItem, ElInput } from 'element-plus'
import { UserFilled, Lock } from '@element-plus/icons-vue'
import { user } from "@/request"
import { useRouter } from "vue-router"
import { useUserStore } from "@/store/user/index"

const router = useRouter()

const store = useUserStore()

const ruleFormRef = ref<FormInstance>()

// 账号校验
const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入账号'))
    } else {
        if (ruleForm.username !== '') {
            if (!ruleFormRef.value) return
            ruleFormRef.value.validateField('checkPass', () => null)
        }
        callback()
    }
}
// 密码校验
const validatePass2 = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    } else {
        if (ruleForm.password !== '') {
            if (!ruleFormRef.value) return
            ruleFormRef.value.validateField('checkPass', () => null)
        }
        callback()
    }
}

const ruleForm = reactive({
    username: '',
    password: '',
})

const rules = reactive({
    username: [{ validator: validatePass, trigger: 'blur' }],
    password: [{ validator: validatePass2, trigger: 'blur' }],
    // age: [{ validator: checkAge, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            user.LoginAPI(ruleForm).then(res => {
                console.log(res);
                if (res.code === 200) {
                    localStorage.setItem("token", res.data.tokenHead + res.data.token)
                    ElMessage({
                        message: '登陆成功！',
                        type: 'success',
                    })
                    router.push("/index")
                    user.userIofoAPI().then(res => {
                        console.log(res);
                        store.infoArr = res.data.menus
                        console.log(store.infoArr);

                    })
                }




            })

        } else {
            ElMessage.error('请输入账号/密码')
            return false
        }
    })
}

// const resetForm = (formEl: FormInstance | undefined) => {
//     if (!formEl) return
//     formEl.resetFields()
// }
</script>

<style lang="less" scoped>
.box {
    width: 100vw;
    height: 100vh;
    // background-color: rgba(0, 0, 0, .5);
    background-color: #2d3a4b;
    overflow: hidden;

    .box1 {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: -30px;
        width: 100%;
        height: 100%;
        background-color: #2d3a4b;

        .el-from-item {
            width: 400px;
            height: 50px;
            background-color: rgba(255, 255, 255, .1);
            margin-top: 10px;

            .el-input {
                width: 400px;
                line-height: 50px;
                margin-left: -120px;
                height: 50px;
                color: #fff;
                background-color: rgba(0, 0, 0, .1);

                :deep(.el-input__wrapper) {
                    background-color: rgba(0, 0, 0, .1);
                }

                :deep(.el-input__inner) {
                    color: #fff;
                }

            }

            :deep(.el-form-item__error) {
                margin-left: -120px;
            }
        }

    }
}
</style>